<template>
  <div class="topRec_List">
    <my-charts :my-option="option"></my-charts>
  </div>
</template>

<script setup>
const data = [
  {
    name: "数据中心",
    symbol:
      "image://",
    symbolSize: [239, 219],
    value: [170, 200],
    x: 300,
    y: 400,
  },
  {
    name: "分数据中心一",
    x: 400,
    y: 400,
    value: [400, 400],
    symbol:
      "image://",
    symbolSize: [135, 131],
  },
  {
    name: "分数据中心二",
    x: 400,
    y: 400,
    value: [-100, 380],
    symbol:
      "image://",
    symbolSize: [135, 131],
  },
  {
    name: "分数据中心三",
    x: 400,
    y: 400,
    value: [-100, 120],
    symbol:
      "image://",
    symbolSize: [135, 131],
  },
];

const option = {
  backgroundColor: "transparent",
  xAxis: { min: 0, max: 500, show: false, type: "value" },
  yAxis: { min: 0, max: 500, show: false, type: "value" },
  grid: {
    top: 20,
    left: 180,
    right: 0,
    bottom: "10%",
  },
  tooltip: {
    show: false,
  },
  series: [
    {
      type: "graph",
      zlevel: 5,
      // 拖拽
      // draggable: true,
      // 拖拽后线条跟着走
      edgeSymbol: ["none", "arrow"],
      coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
      label: {
        // 文字
        show: true,
        // 文字间隔
        distance: 10,
        // 文字大小
        fontSize: 16,
      },
      data: data,
      links: [
        {
          source: "数据中心",
          target: "分数据中心一",
        },
        {
          source: "数据中心",
          target: "分数据中心二",
        },
        {
          source: "数据中心",
          target: "分数据中心三",
        },
      ],
      lineStyle: {
        opacity: 1,
        color: "#53B5EA",
        curveness: 0.2,
        width: 2,
      },
    },
    {
      type: "lines",
      coordinateSystem: "cartesian2d",
      z: 1,
      zlevel: 2,
      animation: false,
      effect: {
        show: true,
        period: 8,
        trailLength: 0.01,
        symbolSize: 12,
        symbol: "pin",
        loop: true,
        color: "rgba(55,155,255,0.5)",
      },
      lineStyle: {
        color: "#22AC38",
        width: 0,
        curveness: 0.2,
      },
      // 流线
      data: [
        {
          coords: [
            [170, 200],
            [400, 400],
          ],
        },
        {
          coords: [
            [170, 200],
            [-100, 380],
          ],
        },
        {
          coords: [
            [170, 200],
            [-100, 120],
          ],
        },
      ],
    },
  ],
};
</script>

<style scoped lang="scss">
.topRec_List {
  width: 100%;
  height: 100%;
  animation: breath_light 6s infinite;
  // 闪烁动画
  @keyframes breath_light {
    0% {
      filter: brightness(50%);
    }

    50% {
      filter: brightness(95%);
    }

    100% {
      filter: brightness(80%);
    }
  }
}
</style>
